<template>
    <div class="all">
      <div class="select">选 择 型 号</div>
      <div class="lynk01">
        <img src="../../assets/images/drive/L01.png" alt="">
        <p @click="change('您已选择:01')">选择01</p>
      </div>
      <div class="lynk"></div>
      <div class="lynk02">
        <img src="../../assets/images/drive/L02.png" alt="">
        <p @click="change('您已选择:02')">选择02</p>
      </div>
      <div class="lynk"></div>
      <div class="lynk03">
        <img src="../../assets/images/drive/L03.png" alt="">
        <p @click="change('您已选择:03')">选择03</p>
      </div>
      <div class="lynk"></div>
      <div class="lynk05">
        <img src="../../assets/images/drive/05car3.png" alt="">
        <p @click="change('您已选择:05')">选择05</p>
      </div>
      <div class="fill">
        <p>填写信息</p>
        <span>{{msg}}</span>
      </div>
      <shareFoot></shareFoot>
    </div>
</template>

<script>
  import shareFoot from "../share/shareFoot";
    export default {
        name: "selectType",
      components:{
          shareFoot
      },
      data(){
          return{
            msg:""
          }
      },
      methods:{
          offset(elem){
            var obj={
              left:elem.offsetLeft,
              top:elem.offsetTop,
              width:elem.offsetWidth,
              height:elem.offsetHeight
            }

            return obj;
          },
          change(a){
            this.msg=a;
            // var jump = document.getElementsByClassName()
            var content = document.documentElement.scrollTop||document.body.scrollTop;
            var fill = document.getElementsByClassName('fill');
            content.animate({'scrollTop':fill.offset().top})
          }
      }

    }
</script>

<style scoped>
  .select{
    background: black;
    font-size: 30px;
    margin-top: -5px;
    padding-top: 50px;
    padding-bottom: 120px;
    color: white;
    position: relative;
  }
  .select::after{
    content: "";
    position: absolute;
    width: 30%;
    height: 1px;
    background: orangered;
    bottom: 100px;
    left: 35%;
  }
  .lynk{
    height: 80px;
    width: 100%;
    background: black;
  }
  .lynk01, .lynk02, .lynk03, .lynk05{
    width: 100%;
    height: 150px;
    background: darkslategrey;
    position: relative;
  }
  .lynk01 img, .lynk02 img, .lynk03 img, .lynk05 img{
    position: absolute;
    top:-60px;
    left: 50%;
    transform: translateX(-50%);
  }
  .lynk01 p, .lynk02 p, .lynk03 p, .lynk05 p {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    color: orangered;
    width: 120px;
    height: 35px;
    line-height: 35px;
    border: 1px solid orangered;
    font-size: 14px;
  }
  .fill{
    width: 100%;
    background: black;
  }
  .fill>p{
    font-size: 20px;
    color: white;
    position: relative;
    padding: 30px 0;
  }
  .fill::after{
    position: absolute;
    content: "";
    width: 30%;
    height: 1px;
    background: orangered;
    left: 35%;
  }
  .fill span{
    color: lime;
    font-size: 25px;
    line-height: 120px;
    margin-top: 60px;
  }
</style>
